<template>
    <div class="comment-box">
      <!-- 留言用户头像 -->
      <el-avatar :size="50" :src="userInfo.avatar" class="avatar"></el-avatar>
  
      <!-- 留言输入区域 -->
      <div class="comment-input-area">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="写下你的留言..."
          v-model="newCommentText"
          class="comment-textarea"
        >
        </el-input>
  
        <!-- 发布按钮 -->
        <el-button type="primary" @click="submitComment" class="submit-button">发布</el-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
    // 接收父组件传来的当前登录用户的信息
    userInfo: Object
  },
    data() {
      return {
        newCommentText: '', // 用户输入的留言内容
      };
    },
    methods: {
      submitComment() {
        // 提交留言逻辑，比如将留言发送到服务器
        if (this.newCommentText.trim()) {
          // 假设这里有一个方法可以添加留言到留言板数据框组件中
          this.$emit('add-comment', this.newCommentText);
          this.newCommentText = ''; // 清空输入框
        }
      }
    },
  };
  </script>
  
  <style scoped>
  .comment-box {
    display: flex;
    align-items: flex-start;
  }
  
  .avatar {
    margin-right: 10px;
  }
  
  .comment-input-area {
    flex-grow: 1;
  }
  
  .submit-button {
    margin-top: 10px;
    float: right;
  }
  </style>